<template>
  <!-- 员工后台:给老人建档(健康档案) -->
  <el-form :model="files" label-width="180px" label-position="right">
    <!-- 建档用户 -->
    <el-form-item label="建档用户">
      <el-select
          v-model="files.older_id"
          placeholder="请选择老人..."
          style="width: 100%; max-width: 800px;"
      >
        <el-option
            v-for="item in olderList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>

    <!-- 用户信息组 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="手机号">
          <el-input
              v-model="olderInfo.phone"
              :disabled="true"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="地址">
          <el-input
              v-model="olderInfo.address"
              :disabled="true"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 亲属信息组 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="亲属">
          <el-input
              v-model="olderInfo.clan"
              :disabled="true"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="亲属电话">
          <el-input
              v-model="olderInfo.clan_phone"
              :disabled="true"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 健康数据组 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="身高(cm)">
          <el-input
              type="number"
              v-model.number="files.height"
              placeholder="必填项!"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="体重(kg)">
          <el-input
              type="number"
              v-model.number="files.weight"
              placeholder="必填项!"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 呼吸频率 & 脉搏 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="呼吸频率(次/min)">
          <el-input
              type="number"
              v-model.number="files.respiratory_rate"
              placeholder="必填项!"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="脉搏(次/min)">
          <el-input
              type="number"
              v-model.number="files.pulse"
              placeholder="必填项!"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 血压组 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="低压(mmHg)">
          <el-input
              type="number"
              v-model.number="files.min_pressure"
              placeholder="必填项!"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="高压(mmHg)">
          <el-input
              type="number"
              v-model.number="files.high_pressure"
              placeholder="必填项!"
              style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 心电图 & 疫苗 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="心电图状况">
          <el-input
              v-model="files.electrocardiogram"
              style="width: 100%"
              placeholder="必填项!"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="接种新冠疫苗的次数">
          <el-input
              type="number"
              v-model.number="files.vaccination"
              style="width: 100%"
              placeholder="必填项!"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 体温 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="体温">
          <el-input
              type="number"
              v-model.number="files.temperature"
              style="width: 100%"
              placeholder="必填项!"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 建档员工 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="建档员工">
          <el-input
              v-model="employeeInfo.username"
              style="width: 100%"
              :disabled="true"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系方式">
          <el-input
              v-model="employeeInfo.phone"
              style="width: 100%"
              :disabled="true"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 地址 & 管理员 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="地址">
          <el-input
              v-model="employeeInfo.address"
              style="width: 100%"
              :disabled="true"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上属管理员">
          <el-select
              v-model="employeeInfo.admin_id"
              style="width: 100%"
              :disabled="true"
          >
            <el-option
                :label="item.username"
                :value="item.id"
                v-for="item in adminList"
                :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="restSubmit">重 置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import myAxios from '@/tools/myAxios';
import Qs from 'qs';
export default {
  name:'StatusEmployeeAddFiles',
  data() {
    return {
      // 老人数据
      olderInfo:{
        phone:'',
        address:'',
        clan:'',
        clan_phone:''
      },

      // 所有的老人信息
      olderList:[],

      // 档案数据
      files: {
        older_id:null,

        temperature: '',
        height: '',
        weight: '',
        respiratory_rate: '',
        pulse: '',
        min_pressure: '',
        high_pressure: '',
        electrocardiogram: '',
        vaccination:'',

        employee_id:null          // 建档人
      },
      // 员工数据
      employeeInfo:{
        username:'',
        phone:'',
        address:'',
        admin_id:null
      },

      // 所有管理员的数据
      adminList:[]
    }
  },
  watch:{
    // 监视老人下拉框，并实时更新老人信息
    'files.older_id':{
      handler(newValue){
        this.olderList.forEach((item)=>{
          if(item.id === newValue){
            this.olderInfo.phone = item.phone;
            this.olderInfo.address = item.address;
            this.olderInfo.clan = item.clan;
            this.olderInfo.clan_phone = item.clan_phone;
          }
        })
      }
    }
  },
  methods:{
    // 添加老人健康档案确认按钮
    onSubmit() {
      if(
          this.files.older_id === null        ||
          this.files.temperature === ''       ||
          this.files.height === ''            ||
          this.files.weight === ''            ||
          this.files.respiratory_rate === ''  ||
          this.files.pulse === ''             ||
          this.files.min_pressure === ''      ||
          this.files.high_pressure === ''     ||
          this.files.electrocardiogram === '' ||
          this.files.vaccination === ''       ||
          this.files.employee_id === null
      ){
        this.$message({
          message: '请输入数据!',
          type: 'warning'
        });
        return;
      }
      myAxios(
          'http://localhost:8088/older/addolderhealthfile',
          'post',
          Qs.stringify(this.files),
          (data)=>{
            // 提示一下
            this.$message({
              message: '创建成功!',
              type: 'success'
            });
            restSubmit();
          }
      )
    },
    // 重置按钮
    restSubmit(){
      this.olderInfo = {
        phone:'',
        address:'',
        clan:'',
        clan_phone:''
      },
          this.files = {
            older_id:null,

            temperature: '',
            height: '',
            weight: '',
            respiratory_rate: '',
            pulse: '',
            min_pressure: '',
            high_pressure: '',
            electrocardiogram: '',
            vaccination:'',

            employee_id:null          // 建档人
          },
          // 提示一下
          this.$message({
            message: '重置成功!',
            type: 'success'
          });
    }
  },
  mounted(){
    // 填充员工数据
    const user = JSON.parse(sessionStorage.getItem('user'));
    this.employeeInfo.username = user.username;
    this.employeeInfo.phone = user.phone;
    this.employeeInfo.address = user.address;
    this.employeeInfo.admin_id = user.admin_id;

    this.files.employee_id = user.id;

    // 获取所有老人信息
    myAxios(
        'http://localhost:8088/older/getallolderdetailinfobyall',
        'get',
        null,
        (data)=>{
          if(data.length === 0){
            // 提示一下
            this.$message({
              message: '老人列表为空!',
              type: 'warning'
            });
          }else{
            this.olderList = data;
          }
        }
    )

    // 获取所有管理员信息
    myAxios(
        'http://localhost:8088/admin/getalladmin',
        'get',
        null,
        (data)=>{
          if(data.length === 0){
            // 提示一下
            this.$message({
              message: '管理员列表为空!',
              type: 'warning'
            });
          }else{
            this.adminList = data;
          }
        }
    )
  }
}
</script>

<style lang="less" scoped>
</style>